<template>
  <div>
    <el-dialog
      v-dialogDrag
      title="修改权限"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="closereg"
    >
      <el-form
        ref="permissionseidt"
        :model="permissionseidt"
        :rules="rules"
        label-width="25%"
      >
        <el-form-item label="权限编码" prop="permissionscode">
          <el-input
            v-model="permissionseidt.permissionscode"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="权限名" prop="permissionsname">
          <el-input v-model="permissionseidt.permissionsname" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="permissionseidt.description" />
        </el-form-item>
        <el-form-item label="排序号" prop="sort">
          <el-input v-model="permissionseidt.sort" type="number" />
        </el-form-item>
        <el-form-item label="Icon" prop="icon">
          <icon-picker v-model="permissionseidt.icon" />
        </el-form-item>

        <el-form-item label="组件路径" prop="component">
          <el-input v-model="permissionseidt.component" />
        </el-form-item>
        <el-form-item label="上级" prop="parentid">
          <treeselect
            v-model="permissionseidt.parentid"
            :data="treedata"
            :props="defaultProps"
          />
        </el-form-item>
        <el-form-item label="显示" prop="alwaysshow">
          <el-switch
            v-model="permissionseidt.alwaysshow"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          @click="onSubmite('permissionseidt')"
        >确认</el-button>
        <el-button
          size="mini"
          @click="dialogFormVisible = false"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updatepermissions } from '@/api/permissions'
import treeselect from '@/components/TreeSelect/TreeSelect'
export default {
  name: 'Permissiondit',
  components: { treeselect },
  data() {
    return {
      rules: {
        permissionscode: [
          {
            required: true,
            pattern: '^[A-Za-z]+$',
            message: 'cannot be blank and only letters can be entered'
          }
        ],
        permissionsname: [{ required: true, message: 'Cannot be empty ' }],
        sort: [
          { required: true, message: 'Cannot be empty and must be a number' }
        ]
      },
      dialogFormVisible: false,
      permissionseidt: {
        permissionscode: '',
        permissionsname: '',
        description: '',
        icon: '',
        alwaysshow: true,
        component: '@/views/',
        sort: 0,
        parentid: null
      },
      treedata: [],
      defaultProps: {
        id: 'id',
        children: 'children', // 代表children为子级
        label: 'permissionsname' // 根据name渲染tree列表
      }
    }
  },
  methods: {
    onSubmite(formData) {
      this.$refs[formData].validate(async(valid) => {
        if (valid) {
          var res = await updatepermissions(this.permissionseidt)
          if (res.code === 200) {
            this.$emit('callEdit')
            this.$message({
              message: 'Success',
              type: 'success'
            })
            this.dialogFormVisible = false
          }
        }
      })
    },
    onshow(obj, treeobj) {
      this.permissionseidt = { ...obj }
      this.treedata = treeobj
      this.dialogFormVisible = true
    },
    closereg() {
      this.dialogFormVisible = false
      this.clear()
    },
    clear() {
      this.$refs['permissionseidt'].resetFields()
    }
  }
}
</script>
<style  scoped>
</style>
